import { useImmer  } from "use-immer";
import { QuestionType } from './components/QuesaItem';
import { Input, Table, Tag, Button } from "antd";
import { useTitle } from 'ahooks';

const list = [
  {
    _id: '1',
    title: '问卷1',
    answerCount: 2,
    isPublished: false,
    createTime: '2025-04-27',
    isCollect: true
  },
  {
    _id: '2',
    title: '问卷2',
    answerCount: 65,
    isPublished: true,
    createTime: '2025-04-27',
    isCollect: false
  }
]

function PageEntry() {
  useTitle('问卷列表 - 回收站');
  const [tableList, setTableList] = useImmer<QuestionType[]>(list);
  const [selectedIds, setSelectedIds] = useImmer<React.Key[]>([]);

  const tableColumns = [
    {
      title: '问卷名称',
      dataIndex: 'title',
    },
    {
      title: '回答数量',
      dataIndex: 'answerCount',
    },
    {
      title: '发布状态',
      dataIndex: 'isPublished',
      render: (isPublished: boolean) => (
        isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
  ]

  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[]) => {
      setSelectedIds(selectedRowKeys);
    },
  }

  return (
    <div className="p-10px">
      <div className="flex items-center justify-between">
        <h2>回收站</h2>
        <div>
          <Input type="text" placeholder="请输入问卷名称" />
        </div>
      </div>
      <div className="mb-10px">
        <Button type="primary" className="mr-10px" disabled={selectedIds.length === 0}>恢复</Button>
        <Button danger disabled={selectedIds.length === 0}>彻底删除</Button>
      </div>
      <div>
        <Table rowKey="_id" rowSelection={rowSelection} dataSource={tableList} columns={tableColumns} />
      </div>
    </div>
  )
}

export default PageEntry;